/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "compass/reset";
@import "compass/css3";

$orange: #ff812d;

html{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.2em;
	letter-spacing: -0.05em;
}

#widget{
	position: absolute;
	overflow: auto;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	/*
	 * HTML CSS Copied
	 */
	font-family: Verdana, Geneva, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.2em;
	letter-spacing: -0.05em;
}

.clear{
	clear: both;
}

#header{
	
	padding: 0 1.5em 1em;
	
	h1{
		padding: 0 0.4em;
		font-size: 26/12 + 0em;
		color: #4a4a4a;
		padding-top: 0.8em;
		padding-bottom: 0.5em;
		font-weight: normal;
		line-height: 1.1em; 
	}
	
	.intro{
		padding: 0 0.7em;
		font-size: 15/12 + 0em;
		color: #6e6e6e;
		padding-bottom: 1em;
	}
	
	.search-box{
		position: relative;
		padding: 0.3em 1.3em 1.2em;
		border: 1px solid #cfcfcf;
		@include border-radius(20px);		
		-moz-box-shadow: inset 0px 2px 2px #dfdfdf;
		-webkit-box-shadow: inset 0px 2px 2px #dfdfdf;
		box-shadow: inset 0px 2px 2px #dfdfdf;
		min-height: 15px;
		
		input{
			font-size: 16/12 + 0em;
			border: 1px solid transparent;
			background: transparent;
			color: #555;
			display: block;
			z-index: 3;
		}
		
		p{
			font-size: 16/12 + 0em;
			width: 20px;
		}
		
		input[type=button]{
			float: right;
			width: 22px;
			height: 23px;
			background: url(../../img/search.gif) transparent center center no-repeat;
			position: absolute;
			right: 1.5em;
			top: 50%;
			margin-top: -11px;
		}
		
		.text{
			margin-right: 4em;
			position: relative;
			
			input{
				position: absolute;
				width: 100%;
				&:focus{
					outline:none;
				}
			}
		}
	}
}

#map-container{
	padding-top: 32px;
	position: relative;
	
	.no-results{
		padding: 2.3em 2.2em 1.6em;
		font-weight: bolder;
		background: #DDD;
	}
	
	.header{
		position: absolute;
		z-index: 10;
		top: 0;
		border-top: 1px solid #a8a8a8;
		
		table{
			height: 40px;
			width: 100%;
			padding: 0;
			
			td{
				margin: 0;
				vertical-align: middle;
				width: auto;
				background: url(../../img/background.png) transparent center center repeat-x;
				
				&.spacing{
					div{
						width: 2.2em;
					}
					padding: 0;
				}
				
				&.selected{
					background: url(../../img/arrow.png) transparent center center repeat-x;
					a{
						color: black;
					}
				}
				
				&.fill{
					padding: 0;
					width: 100%;
				}
				
				a{
					display: block;
					padding: 10px 15px;
					cursor: pointer;
					font-weight: bolder;
					color: #666;
					text-decoration: none;
					font-size: 12px;
						
					&:hover{
						color: black;
					}
				}
				
				&.hidden{
					display: none;
				}
			}
		}
	}
	#wrapper{
		position: relative;
		
		#map{
			height:10px;
			.infowindow{
				color: #555;
			}
			.gmnoprint{
				margin-top: 14px !important;
			}
		}
		
		#options{
			position: absolute;
			top:0;
			width: 100%;
			height: 100%;
			background-color: white;
			
			h2{
				padding: 2.2em 2.2em 1.4em; 
				font-weight: bolder;
			}
			
			ul{
				border-top: 1px solid #dfdfdf;
				
				li{
					a{
						display: block;
						border-bottom: 1px solid #dfdfdf;
						padding: 1em 1.4em;
						font-size: 18/12 + 0em;
						color: #7e7e7e;
						cursor: pointer;
						text-decoration: none;
						
						&:hover{
							background: $orange;
							color: white;
						}
					}
				}
			}
		}
		
		#results{
			position: absolute;
			top:0;
			width: 100%;
			height: 100%;
			background-color: white;
			
			.address{
				padding: 2.2em 2.2em 1.4em;
				background: $orange;
				color: white;
				
				h2{
					font-weight: bolder;
					padding-bottom: 0.5em;
				}
				
				h3{
					font-size: 19/12 + 0em;
					font-weight: normal;
				}
			}
				
			#vote-data{
				color: #333;
				overflow: auto;
				
				.wrapper{
					padding: 1.6em 2.2em 2.2em;
						
					.less{
						color: #666;
					}
					
					p{
						font-size: 14/12 + 0em;
						padding-bottom: 0.7em;
						color: #777;
					}
					
					h4{
						font-weight: bolder;
						text-transform: uppercase;
						padding-bottom: 1.2em;
						padding-top: 0.9em;
						border-bottom: 1px dashed #666;
						margin-bottom: 1.2em;
					}
					h5{
						font-weight: bolder;
						text-transform: uppercase;
						padding-bottom: 1.2em;
						padding-top: 0.9em;
						color: #777;
					}
					.go-map{
						float: left;
						margin: 0 20px 20px 0;
						width: 100px;
						padding-top: 100px;
						padding-bottom: 10px;	
						background: url(../../img/map.png) $orange center 10px no-repeat;
						text-transform: uppercase;
						color: white;
						text-align: center;
						font-weight: bolder;
						text-decoration: none;
						font-weight: bold;
						cursor: pointer;
					}
					.padding{
						margin-left: 120px;
					}
					.no-results{
						padding: 1.6em 2.2em 1.6em;
						color: #555;
					}
				}			
				
				a{
					text-decoration: underline;
					color: #30a8ed;
				}
				
				.footer{
					background: #e9e9e9;
					color: #232323;
					padding: 1.5em 2em 0.9em; 
					font-size: 11/12+0em;
					
					p{
						padding-bottom: 0.9em;
					}
				}	
			}
		}
		
		#loading{
			background: url(../../img/loader.gif) white center center no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor: progress;
			display: none;
		}
	}
}

